{{extend 'layout.html'}}

<style type="text/css">

#superbox-overlay{position:fixed;top:0;left:0;z-index:9998;width:100%;height:100%;}
#superbox-wrapper{position:fixed;z-index:9999;top:0;display:table;width:100%;height:100%;}
#superbox-container{position:relative;display:table-cell;width:100%;height:100%;margin:0;padding:0;vertical-align:middle;}
#superbox{margin:0 auto;padding:0;}
#superbox-container .loading{margin:0;text-align:center;}

/* IE7 */
*:first-child+html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
*:first-child+html #superbox{position:relative;top:-50%;display:block;}
* html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
* html #superbox{position:relative;top:-50%;display:block;}
* html #superbox-overlay{position:absolute;height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight + 'px' : document.body.offsetHeight + 'px');}
* html #superbox-wrapper{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}

/* Default Theme */
#superbox-overlay{background:#000;}
#superbox-container .loading{text-align:center;font-size:14px;color:#fff;}
#superbox{padding:10px;background:#fff;}
#superbox-innerbox{padding:10px 0;}
#superbox.image{text-align:center;}
#superbox .close,
#superbox .nextprev{overflow:hidden;margin:0;}


div.notes {
    background: lightyellow;
    line-height: 15px;
    width: 150px;
/*     height: 150px; */
    padding: 5px;
    margin: 22px;
    float: left;
    position: relative;
    text-align: left;
    wrapping: wrap;
    overflow: hidden;
/*     white-space: normal; */
}

</style>

<script language="javascript" type="text/javascript">
    $(function(){
        $.superbox();
    });
</script>

<br>

{{if notes:}}
<div id="create">
    <a href="{{=URL(r=request,f='delete_all')}}">delete all sticky notes</a>
</div>
{{pass}}


<br>

<div id="create">
    <a href="{{=URL(r=request,f='create')}}" rel="superbox[iframe][550x350]">create new</a>
</div>

{{for note in notes:}}
    <div class="notes" id="note_{{=note.id}}">
      <div id="note_body_{{=note.id}}">
        {{=note.body}}
        <a href="{{=URL(r=request,f='update',args=note.id)}}" rel="superbox[iframe][550x350]">update</a>
        <a href="{{=URL(r=request,f='delete',args=note.id)}}">delete</a>
        <a href="#" onclick="show_note_details('{{=note.id}}')">info</a>
      </div>
      <div id="note_info_{{=note.id}}" style="display:none">
        {{if note.title:}}<b>{{=T('title')}}:</b> {{=note.title}}<br>{{pass}}
        {{if note.created_on:}}<b>{{=T('created')}}:</b> {{=note.created_on.strftime("%Y-%m-%d %H:%M:%S")}}<br>{{pass}}
        {{if note.removal_date:}}<b>{{=T('removal')}}:</b> {{=note.removal_date.strftime("%Y-%m-%d %H:%M:%S")}}<br>{{pass}}
        <a href="#" onclick="show_note_content('{{=note.id}}')">return</a>
      </div>
    </div>
{{pass}}

<div style="clear:both">&nbsp;</div>

<script language="javascript" type="text/javascript">
$('div.notes').draggable({
    appendTo: 'body',
    drag: function(event, ui) {
        $(this).css("opacity", "0.6");
    },
    stop: function(event, ui) {
        $(this).css("opacity", "1");
    },
});

function show_note_details(note_id) {
    $('#note_body_' + note_id).hide("fast");
    $('#note_' + note_id).css({"width":"220px"});
    $('#note_info_' + note_id).fadeIn("slow");
}

function show_note_content(note_id) {
    $('#note_info_' + note_id).hide("fast");
    $('#note_' + note_id).css({"width":"150px"});
    $('#note_body_' + note_id).fadeIn("slow");
}
</script>
